<script>
import { defineComponent } from "vue";
import { submitOperateRecord } from "@/api/api";

export default defineComponent({
  name: "netState",
  props: {
    info:{
      type: Object
    },
    state:{
      type: String
    }
  },
  methods: {
    checkState() {
      this.desc=this.$store.state.operDescData.find(item=>item.type==='jc'&&item.comType==='遥测').desc;
      this.desc=this.desc.replace('jgName',this.info.jg_name).replace('devName',this.info.page_position+"："+this.info.state_desc).replace('数值为state', '状态为'+(Number(this.state) === 0 ? "通" : "断"))
      submitOperateRecord( {log_desc:this.desc})
    }
  }
});
</script>

<template>
<div class="outer" @contextmenu.stop.prevent="checkState">
  <div class="state" :class="state=='0'?'state_0':'state_1'">{{state=='0'?'通':'断'}}</div>
</div>
</template>

<style scoped lang="less">
.outer{
  font-size: 20px;
  width: 100%;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
}
.state{
  margin: 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.state_0{
  background-color: rgba(93, 239, 79);
}
.state_1{
  background-color: rgba(255, 0, 0);
}
</style>
